<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>客户管理</el-breadcrumb-item>
                <el-breadcrumb-item>会员管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框杀杀杀
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="clientFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="clientFormData.username" placeholder="请输入账号"></el-input>
                </el-form-item>
<!--                <el-form-item >-->
<!--                    <el-input v-model="clientFormData.name" placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->
                <!--                <el-form-item >-->
                <!--                    <el-input v-model="rolrFormData.phone" placeholder="请输入电话"></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item>
                    <el-button type="primary"@click="quere"> 查询</el-button>
                    <el-button type="primary" @click="insertClient">添加</el-button>
<!--                    <el-button type="primary">导入</el-button>-->
                    <el-button type="primary" @click="exportlog">导出</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="账号"
                            width="120">
                    </el-table-column>
<!--                    <el-table-column-->
<!--                            prop="password"-->
<!--                            label="密码">-->
<!--                    </el-table-column>-->
                    <el-table-column
                            prop="clientName"
                            label="昵称">
                    </el-table-column>
                    <el-table-column
                            prop="sex"
                            label="性别"
                            :formatter="sexFormat">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="账号状态">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.status"
                                    active-color="#13ce66"
                                    active-value="0"
                                    inactive-value="1"
                                    inactive-color="#ff4949"
                                    @change="changestutes(scope.row.id,scope.row.status)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="contactName"
                            label="联系人">
                    </el-table-column>
                    <el-table-column
                            prop="phoneNum"
                            label="电话">
                    </el-table-column>
                    <el-table-column
                            prop="contactAddress"
                            label="联系地址">
                    </el-table-column>
                    <el-table-column
                            prop="licenseNo"
                            label="驾照号">
                    </el-table-column>
                    <el-table-column
                            prop="phoneNum"
                            label="电话">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址">
                    </el-table-column>
                    <el-table-column
                            prop="email"
                            label="邮箱">
                    </el-table-column>
                    <el-table-column
                            prop="memberLevelId"
                            label="会员级别">
                    </el-table-column>
                    <el-table-column
                            prop="accountBalance"
                            label="账户余额">
                    </el-table-column>
                    <el-table-column
                            prop="integration"
                            label="积分">
                    </el-table-column>
                    <el-table-column
                            prop="growth"
                            label="成长值">
                    </el-table-column>
                    <el-table-column
                            prop="historyIntegration"
                            label="历史数据积分"
                            width="120">
                    </el-table-column>

                </el-table>

                <!--                分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
        </el-card>
        <!--添加客户的弹出框-->
            <el-dialog
                    title="录入会员"
                    :visible.sync="editDialogVisible"
                    width="30%"
            >
                <!--            model:表单数据-->
                <el-form  label-width="80px" :model="clientForm" :rules="rules" ref="clientForm"  >
                    <el-form-item label="姓名" prop="username" >
                        <el-input v-model="clientForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="clientForm.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="clientForm.clientName" placeholder="请输入昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="clientForm.sex" placeholder="请选择性别">
                            <el-option
                                    v-for="item in sexoptions"
                                    :key="item.sexvalue"
                                    :label="item.label"
                                    :value="item.sexvalue">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="clientForm.phoneNum" placeholder="请输入手机号"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="联系地址">-->
<!--                        <el-input v-model="clientForm.contactAddress" placeholder="请输入联系地址"></el-input>-->
<!--                    </el-form-item>-->
                    <el-form-item label="驾照号">
                        <el-input v-model="clientForm.licenseNo" placeholder="请输入驾照号"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="formSubmit">确 定</el-button>
              </span>
            </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "GodManage",
        data(){
            var Id = this.id
            var same = {id: '', same: ''}
            var that = this
            var validatorname = function (rule, value, callback) {
                same.id = Id;
                same.same = value;
                that.$http.post(`/manage/client/uniqueCheck`, same).then(function (response) {
                    if (response.data.result.type) {
                        callback();
                    } else {
                        callback("菜单名重复");
                    }
                });
            }
            return{
                editDialogVisible:false,
                pageSize:5,
                currentPage:1,
                tableData:[],
                clientFormData: {},
                total:0,
                id:'',
                clientForm:{
                    username: '',
                },
                rules:{
                    username: [
                            { required: true, message: '请输入活动名称', trigger: 'blur' },
                            { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' },
                            {validator: validatorname, trigger: 'blur'}
                        ],
                    },
                sexvalue:'',
                sexoptions: [{
                    sexvalue: '0',
                    label: '男'
                }, {
                    sexvalue: '1',
                    label: '女'
                },],
            }
        },
        created() {
            this.initClientTable()
        },
        methods:{
            sexFormat: function( row, column) {
                return row.sex == '1' ? '男' : row.sex == '0' ? "女" : "";
            },
            exportlog() {
                var that = this;
                this.$http.get("/manage/client/exportlogs").then(function (response) {
                    that.$message.success(response.data.message)
                })
            },
            initClientTable(){
                var that = this;
                this.$http.post(`/manage/client/initClient/${this.currentPage}/${this.pageSize}`,this.clientFormData).then(function (resp) {

                    that.total=resp.data.result.total;
                    that.tableData=resp.data.result.records;
                })
            },

            formSubmit(){
                var that=this;
                this.$http.post("/manage/client/insertClient", this.clientForm).then(function (returnResult) {
                    that.editDialogVisible = false;
                    that.initClientTable();
                })
            },

            checkName(){
                var that=this;
                this.$http.post("/manage/client/uniqueCheck",this.username).then(function (resp) {
                    that.$message.success(resp.data.message);
                })
            },

            handleSizeChange(v){
                this.pageSize = v;
                this.currentPage();
            },
            //切换页码时触发该方法
            handleCurrentChange(v){
                this.currentPage = v;
                this.initClientTable();
            },
            quere() {
                this.initClientTable()
            },
            changestutes(id,status){
                var that=this;

                this.$http.get(`/manage/client/updateStatus/${id}/${status}`).then(function (resp) {
                     that.$message.success(resp.data.message)
                     that.initClientTable();
                })
            },
            insertClient(){
                this.editDialogVisible=true;
                this.clientForm={};
            },

        }

    }
</script>

<style scoped>

</style>